
import React,{Component} from 'react';
import {
    Text,
    StyleSheet,
    View,
    ScrollView,
    TouchableOpacity
    ,WebView,FlatList
}from 'react-native';
import Modal from "react-native-modal";

import Style  from '../../../../components/Style';
import Icon from 'react-native-vector-icons/MaterialIcons';
import Tool from "../../../../components/Tool";
import Indicator from '../../../../components/Indicator';
import ChoseIcon from 'react-native-vector-icons/FontAwesome';
import DropDown from '../../../../components/DropDown';
var Dimensions = require('Dimensions');
const Color = Style.color;
const Font = Style.fontSize;

export default class Import extends Component{

    // 构造
    constructor(props) {
        super(props);
        this.param = {indexCode: 'index_15_3'};
        this.state = {
            isVisible: false,
            rightList:[],
            topList:[],
            indicator: {visible: true, message: ''},//控制遮罩层,
            title:'小微',
            mapDataArray:[],
            indexCode:'index_15_3',
            selectPeriodIndex:0,
            fieldArray:[{name:'当日新增(专网)',},{name:'当日新增(现网)'},{name:'当日新增(专网)'}]
        };
    }
    componentDidMount() {
        this._getRightList();
        this._getTopList("");
    }
    _getTopList(indexCode){
        if(indexCode != "" && indexCode != null){
            this.param.indexCode = indexCode;
        }
        let qr_params = "",
            _this=this;
        _this.setState({indicator: {visible: true, message: ''}});

        _this._cancelSelected();
        for (key in this.param) {
            qr_params += ("&" + key + "=" + this.param[key]);
        }
        qr_params = qr_params.substring(1);
        Tool.fetchJson(Tool.appPath.mkst + 'pattern/getPatternDetail?indexCode='+this.param.indexCode+'&&orgId=1','',function (data) {
            if(data.state){
                _this.setState({
                    topList:data.info,
                    indicator: {visible: false, message: ''},
                    indexCode:_this.param.indexCode
                });
            }else{
                _this.setState({indicator: {visible: true, message: data.info}});
            }
        },function (error) {
            _this.setState({indicator: {visible: true, message: error}});
        },function () {

        });
    }
    _getRightList(){
        let _this = this;
        Tool.fetchJson(Tool.appPath.mkst + 'pattern/getHomepagePatternInfo','',function (data) {
            _this._getDorpDownList(data.info[0].patterns);
        },function () {

        },function () {

        });
    }
    _getDorpDownList(data){
        let array = [];
        let index= 0;
        for(let i =0;i<data.length;i++){
            if(data[i].indexCode == this.state.indexCode){
                index = i;
            }
            array.push({label:data[i].indexName,value:data[i].indexCode});
        }
        this.setState({
            selectPeriodIndex:index,
            rightList:array,
        });
    }
    _DropDownClick(index,indexCode) {
        this._getTopList(indexCode)
    }
    _cancelSelected() {
        this.setState({
            isVisible: false,
        });
    }
    _changeTitle(title){// 这里的函数是经过constructor中绑定过this的
        let _this = this;
        _this.setState({
            selectTitle:title,
        })
    }
    render(){
        return(
            <View >
                <Indicator isVisible={this.state.indicator.visible} message={this.state.indicator.message}/>
                <View style={{ flex:1}}>
                        <View style={styles.cityView}>
                            <HomeFollowHead
                                click={this._DropDownClick}
                                name={this.state.title} list={this.state.rightList} index={this.state.selectPeriodIndex}/>
                           <ScrollView >
                                <View style={{flexDirection:'row'}}>
                                   <View style={styles.leftView}>
                                    <IndexRandHeader/>
                                       {
                                           this.state.topList.map((item,index)=>(
                                               <View
                                                   key={`Item_${index}`}
                                                   style={{height:40,flexDirection:'row',backgroundColor:index%2==0?Style.color.white:Style.color.heightGray}}>
                                                   <View style={styles.rankTitle}>
                                                       <Text>{index+1}</Text>
                                                   </View>
                                                   <View style={styles.cityTitle}>
                                                       <Text>{item.ORG_NAME}</Text>
                                                   </View>
                                               </View>
                                           ))
                                       }
                                   </View>
                                    <ScrollView horizontal={true}>
                                        {this.state.fieldArray && this.state.fieldArray.map((item, index) => (
                                                <TopItem topList={this.state.topList}
                                                                 siteName={item.name}
                                                                 background={((index %2==0)?Color.white:'#f2f2f2')}
                                                                 color={Color.pink} data={item} rank={(index+1)} key={`IndexItem_${index}`}/>
                                        ))}
                                    </ScrollView>
                                </View>
                           </ScrollView>
                        </View>

                </View>
            </View>
        )
    }
}

class HomeFollowHead extends Component{
    render(){
        return(
            <View style={{height:50,flexDirection:'row', alignItems:'center',paddingLeft:20,paddingRight:20}}>
                <DropDown color={Style.color.green}
                          data={this.props.list}
                          title={'请选择指标'}
                          defaultIndex={this.props.index}
                          onConfirm={(index) => this.props.click(index,this.props.index)}
                          contentComponent={
                              <View style={{flexDirection:'row'}}>
                                  <ChoseIcon name={"sort"} size={18} color={Color.black}/>
                                  <Text style={styles.kpiTitle}>{this.props.name}</Text>
                              </View>
                          }
                />

            </View>
        )
    }
}



class TopItem extends Component{
    _getNum(){
        if(this.props.data.FIELD_TYPE ==3){
            return this._getRatio(this.props.data.INDEX_VALUE)+"%";
        }else{
            return this._getRatio(this.props.data.INDEX_VALUE)+"%";
            //return this.props.data.INDEX_VALUE;  展示没有指标类型,所以就都按照百分数来
        }
    }
    _getRatio(value){
        var str=Number(value*100).toFixed(1);
        return str;

    }
    render(){
        return(
            <View style={{width:150,justifyContent:'center'}}>
                <View style={styles.kpiView}><Text>{this.props.siteName}</Text></View>
                {
                    this.props.topList.map((item,index)=>(
                        <View
                            key={`RightItem_${index}`}
                            style={{height:40,justifyContent:'center',alignItems:'center',backgroundColor:index%2==0?Style.color.white:Style.color.heightGray}}>
                            <Text style={styles.IndexRandItemTD}>12356</Text>
                        </View>
                    ))
                }
            </View>
        );

    }

}

class IndexRandHeader extends Component {
    render() {
        return (
            <View style={styles.leftHeadView}>
                <View style={styles.rankTitle}>
                    <Text>排名</Text>
                </View>
                <View style={styles.cityTitle}>
                    <Text>地市</Text>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    kpiTitle: {
        fontSize: Style.fontSize.normal,marginLeft: 10,marginRight: 10
    },
    select:{
        borderColor:Color.blue,
        borderBottomWidth:2,
    },


    IndexRandItemTD: {
        fontSize:Font.normal,
        color: Color.black
    },
    cityView:{
        backgroundColor:Color.white,
        shadowColor:'#c0c0c0',
        shadowOffset:{ width:4, height:2 },
        shadowOpacity:0.2,
        shadowRadius:2,
        elevation: 4,
        borderTopWidth:1,
        borderColor:'#c0c0c0',
        borderStyle:'dotted',
        height:Dimensions.get('window').height-70,
    },
    topItem:{
        height:80,
        justifyContent:'center',
        padding:20,
    },
    topItemBackColor:{
        backgroundColor:'#fcfcfc',
    },
    leftView:{width:'40%',borderRightWidth:2,borderColor:Style.color.gray},
    leftHeadView:{height:35,flexDirection:'row',backgroundColor:Style.color.heightGray},
    rankTitle:{alignItems:'center',width:'30%',justifyContent:'center'},
    cityTitle:{alignItems:'center',width:'70%',justifyContent:'center'},
    kpiView:{height:35,justifyContent:'center',backgroundColor:Style.color.heightGray,alignItems:'center'}
});
